// less文件可以省略后缀
@import "common";

// 必须加后缀
@import "css.css";


@baseColor: skyblue;
@orangeColor: orange;
@grayColor: gray;
@baseUrl: "../img/";

@text: "我在";

// @var: grayColor;

@border: border-;

// 在less中不会被计算，最终是浏览器进行计算
@var: calc(5px + 10px);

// 3.0版本以后可以不加引号（但编辑器可能会提示错误）
@mediaVar: (min-width: 768px);


// 加括号 不会被编译到css中
.common(@rest...) {
    // color: @param2;
    // font-size: 20px;
    // height: @param1;

    // 形参和实参数量对应
    border: @arguments;

    // @rest 包含所有参数，数量可以不对应
    border: @rest; // transform: @param3;

}


// #111 #111111

.container {

    // 建议用分号分隔参数
    // .common(200px; orange; translateX(100px), translateY(100px));

    .common(2px, dotted, @orangeColor);


    // 父亲的样式继承，与定义的顺序无关

    // 多行注释 编译后会保留
    /*第一行
    第二行*/

    &::before {
        // 对属性值进行拼接
        content: "@{text}前面";
    }

    &::after {
        content: "@{text}后面";
    }

    >.my-p {
        width: @var;
        color: @baseColor;

        // 对属性名进行拼接
        @{border}width: 1px;
        @{border}color: @orangeColor;
        @{border}style: dotted;

    }

    // @baseColor: red;

    // height: 200px;
    // color: @baseColor;
    // border: "@{grayColor}"dotted @baseColor;
    // background: url("@{baseUrl}1.jpg") no-repeat;



    // @media的嵌套 是并列关系
    @media @mediaVar {
        @media (max-width:1100px) {
            color: @grayColor;
            // color: @@var;
        }
    }
}


.container-a {
    // 命名空间

    // .container>.my-p()
    // .container.my-p()
}